<template>
    <div>
      <!-- <h1>我的</h1> -->
        <div id="pic-top">
            <div class="bei-pic">
                <img id="pic-img" src="http://liufusong.top:8080/img/profile/bg.png" alt="">
            </div>
            <div id="user-pic">
                <div id="userHeadPic">
                    <div id="yuanBox">
                        <div id="ppic">
                            <img :src="imgS" alt="">
                        </div>
                    </div>
                    <div id="text">{{nickname}}</div>
                    <div v-text="gender===1? '男':'女'" id="gender"></div>
                    <button id="btn" @click="toLogin">退出</button>
                </div>
            </div>
        </div>

        <div id="icon-center">
            <van-grid router :column-num="3" route>
                <van-grid-item to="/collect" icon="star-o" text="我的收藏" />
                <van-grid-item to="/houseguanli" icon="wap-home-o" text="我的出租" />
                <van-grid-item to="" icon="todo-list-o" text="看房记录" />
                <van-grid-item to="" icon="award-o" text="成为房主" />
                <van-grid-item to="" icon="manager-o" text="个人资料" />
                <van-grid-item to="" icon="phone-o" text="联系我们" />
            </van-grid>
        </div>
        <div id="pic-bottom">
            <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Dialog } from 'vant';
// 全局注册
Vue.use(Dialog);
import { PersonalApi } from "@/api/FindRoom"
export default {
    props: {

    },
    data() {
        return {
            imgS:"",
            gender: "未知",
            nickname:"",
        };
    },
    components: {

    },
    created() {
        this.getPersonal()

    },
    methods: {
        async getPersonal () {
        try {
          const list = await PersonalApi()    
          this.imgS = `http://liufusong.top:8080${list.body.avatar}`
          this.gender = list.body.gender
          this.nickname = list.body.nickname
        } catch(e) {
            console.log(e);
         }
        },
        // 点击退出按钮
        toLogin() {
            // 弹出的弹窗
            Dialog.confirm({
                title: '提示',
                message: '确认退出登录？',
                confirmButtonColor: 'red',
                confirmButtonText:"残忍退出",
                cancelButtonText:"继续留下"
            })
            .then(() => {
                // 跳转至登录页面
                this.$router.push(
                    "/login"
                )
            })
                .catch(() => {});
       
        }
    },
    computed: {

    },

    mounted() {

    },
    watch: {

    },
};
</script>

<style scoped>
#pic-top {
    width: 100%;
    height: 300px;
    position: relative;
    margin-bottom: 6px;
}
#pic-top .bei-pic {
    position: absolute;
    top: -200px;
    width: 375px;
    height: 420px;
    border-radius: 100px;
    overflow: hidden;
}
#pic-top .bei-pic #pic-img {
    width: 100%;
    height: 100%;
}

#user-pic {
    position: absolute;
    bottom: 0;
    left:27.5px;
    width: 320px;
    height: 165px;
    background-color: #fff;
    box-shadow: 0 1px 5px 1px #ccc;
    display: flex;
    justify-content: center;
}
#userHeadPic {
    width: 70px;
    height: 100%;
}
#userHeadPic #text {
    text-align: center;
    font-size: 13px;
    margin: 35px 5px 20px 5px;
    width: 60px;
    height: 20px;
    background-color: #fff;
    font-size: 13px;
    color: #333;
}
#gender {
    font-size: 12px;
    margin-bottom: 10px;
    text-align: center;
}
#yuanBox {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 60px;
    width: 60px;
    background-color: #fff;
    border-radius: 30px;
    top: -40px;
    margin: 0 5px;
    box-shadow: 0 1px 4px .1px #999 ;

}
#yuanBox #ppic {
    width: 52px;
    height: 52px;
    background-color: #21b97a;
    border-radius: 45px;
}
#yuanBox #ppic img {
    width: 100%;
    height: 100%;
}
#userHeadPic #btn {
    margin: 0 10px;
    font-size: 14px;
    height: 28px;
    width: 50px;
    color: #fff;
    border-radius: 6px;
    background-color: #21b97a;
    outline:none;
    border:0px;
}
#icon-center {
    width: 100%;
    height: 190px;
    background-color: #fff;
    border-radius: 5px;
}
#pic-bottom {
    width: 100%;
    height: 100px;
    background-color: brown;
}
#pic-bottom img {
    width: 100%;
    height: 100%;
}

</style>
